<template>
  <div class="content">
    <div class="box">
      <div class="box-in">
        <div class="top-box" v-if="flagtop == true">
          <div class="top">
            <div style="width: 70px">用户昵称:</div>
            <el-input
              v-model="value"
              placeholder="请输入内容"
              size="small"
            ></el-input>
          </div>
          <div>
            状态:<template>
              <el-select v-model="value2" placeholder="请选择" size="small">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </div>
          <div>
            <el-button type="primary" size="small" @click="select"
              ><i class="el-icon-search"></i
              ><span class="span1">搜索</span></el-button
            >
            <el-button size="small" @click="reset"
              ><i class="el-icon-delete"></i
              ><span class="span1">清空</span></el-button
            >
          </div>
        </div>
        <div>
          <div style="text-align: right">
            <span
              class="span2"
              @click="showclick(1)"
              :style="{
                backgroundColor: flag == 1 ? '#e6f6fd' : '#fff',
                color: flag == 1 ? '#35b4ed' : '#606266',
                boxShadow:
                  flag == 1
                    ? '0 0 0.6px 0.3px #35b4ed'
                    : '0 0 1px 1px rgba(0,0,0,0.1)',
              }"
              ><i class="el-icon-refresh"></i
            ></span>
            <span
              class="span2"
              @click="showclick(2)"
              :style="{
                backgroundColor: flag == 2 ? '#e6f6fd' : '#fff',
                color: flag == 2 ? '#35b4ed' : '#606266',
                boxShadow:
                  flag == 2
                    ? '0 0 0.6px 0.3px #35b4ed'
                    : '0 0 1px 1px rgba(0,0,0,0.1)',
              }"
              ><i class="el-icon-search"></i
            ></span>
          </div>
        </div>
        <div class="content">
          <template>
            <el-table
              :data="records"
              style="width: 100%"
              border
              background
              :stripe="true"
            >
              <el-table-column label="用户昵称" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.nickName
                  }}</span>
                </template>
              </el-table-column>
              <el-table-column label="用户头像" align="center">
                <template slot-scope="scope">
                  <img
                    :src="scope.row.pic"
                    alt=""
                    style="width: 20px; height: 20px"
                  />
                </template>
              </el-table-column>
              <el-table-column label="状态" align="center">
                <template slot-scope="scope">
                  <el-popover trigger="hover" placement="top">
                    <div slot="reference" class="name-wrapper">
                      <el-tag
                        size="medium"
                        v-if="scope.row.status == 1"
                        class="el-tag el-tag--small el-tag--light"
                        >正常</el-tag
                      >
                      <el-tag
                        size="medium"
                        v-if="scope.row.status != 1"
                        class="el-tag el-tag--danger el-tag--small el-tag--light"
                        >禁用</el-tag
                      >
                    </div>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="注册时间" align="center">
                <template slot-scope="scope">
                  <span style="margin-left: 10px">{{
                    scope.row.modifyTime
                  }}</span>
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)"
                    style="color: #fff; background-color: #35b4ed"
                    ><i class="el-icon-edit"></i>编辑</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </template>

          <div style="text-align: right">
            <!-- 分页 -->
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageNum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
              >
              </el-pagination>
            </div>
          </div>
        </div>
        <div>
          <el-dialog
            title="修改"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose"
          >
            <div><span>用户头像</span><img :src="row.pic" alt="" /></div>
            <div style="margin-top: 50px">
              <span>用户昵称:</span
              ><el-input
                placeholder="请输入内容"
                v-model="row.nickName"
                :disabled="true"
                class="download-input"
              >
              </el-input>
            </div>
            <div style="margin-top: 40px">
              <span>状态</span>
              <template>
                <el-radio
                  v-model="row.status"
                  :label="1"
                  style="margin-left: 30px"
                  @input="radio"
                  >正常</el-radio
                >
                <el-radio v-model="row.status" :label="0" @input="radio"
                  >禁用</el-radio
                >
              </template>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { list, search } from "@/api/vipadmin/vipadmin.js";
export default {
  data() {
    return {
      records: [], //表格数据
      currentPage4: 1, //当前页
      pageNum: 10, //每页多少条
      total: 0, //总条数
      options: [
        {
          value: 1,
          label: "正常",
        },
        {
          value: 0,
          label: "禁用",
        },
      ],
      value: "", //用户昵称
      value2: "", //状态
      dialogVisible: false, //对话框开关
      row: {}, //每一行内容
      flagtop: true,
      flag: "",
    };
  },
  methods: {
    //头部两个小图标
    showclick(a) {
      console.log(a);
      this.flag = a;
      if (a == 2) {
        this.flagtop = !this.flagtop;
      }
    },
    radio() {
      console.log(this.row.status);
    },
    //搜索接口

    select() {
      this.currentPage4 = 1;
      this.$axios({
        url: "/api/admin/user/page",
        method: "get",
        params: {
          t: new Date().getTime(),
          current: this.currentPage4,
          size: this.pageNum,
          nickName: this.value,
          status: this.value2,
        },
        headers: {
          Authorization: localStorage.getItem("token"),
        },
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == "00000") {
          // console.log(res);
          this.records = res.data.data.records;
          // console.log(res);
          this.pageNum = res.data.data.size;
          this.total = res.data.data.total;
        }
      });
      // search({
      //   t: new Date().getTime(),
      //   current: this.currentPage4,
      //   size: this.pageNum,
      //   nickName: this.value,
      //   status: this.value2,
      // }).then((res) => {
      //   console.log(res);
      //   if (res.code == "00000") {
      //     this.records = res.data.records;
      //     this.total = res.data.total;
      //     this.pageNum = res.data.size;
      //   }
      // });
    },
    //渲染接口
    handleClick() {
      this.$axios({
        method: "get",
        url: "/api/admin/user/page",
        params: {
          t: new Date().getTime(),
          current: this.currentPage4,
          size: this.pageNum,
        },
        headers: {
          Authorization: localStorage.getItem("token"),
        },
      }).then((res) => {
        console.log(res.data);
        if (res.data.code == "00000") {
          // console.log(res);
          this.records = res.data.data.records;
          // console.log(res);
          this.pageNum = res.data.data.size;
          this.total = res.data.data.total;
        }
      });
    },
    handleEdit(index, row) {
      //编辑
      console.log(index, row);
      this.dialogVisible = true;
      this.row = row;
    },
    reset() {
      this.value = "";
      this.value2 = "";
      this.currentPage4 = 1;
      this.pageNum = 10;
      this.handleClick();
    },
    //分页点击
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageNum = val;
      this.handleClick();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val;
      this.handleClick();
    },
    //对话框关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  created() {
    this.handleClick();
  },
};
</script>

<style scoped lang='scss'>
.content::v-deep {
  .el-table thead {
    color: black !important;
    font-weight: 500;
    background-color: red;
  }
  .el-table th,
  .el-table tr:nth-child(0) {
    background-color: #fafafa;
  }
}
.top {
  display: flex;
  align-items: center;
  padding: 10px;
}
.top-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 900px;
  color: #606266;
}
.box {
  padding: 18px;
  background-color: #f1f4f5;
}
.box-in {
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
}
.content {
  margin-top: 40px;
}
.el-select,
.el-input {
  width: 254px;
  height: 28px;
}
.el-button {
  font-size: 12px;
  border-radius: 3px;
  padding: 7px 15px;
  color: #fff;
  background-color: #02a1e9;
  border-color: #02a1e9;
}
.el-button:nth-child(2) {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin-left: 20px;
  transition: 0.1s;
  font-weight: 500;
}
.span1 {
  margin-left: 20px;
}
.download-input {
  cursor: not-allowed;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 90%;
}
.span2 {
  display: inline-block;
  text-align: center;
  padding: 7px;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
  color: #606266;
  font-size: 14px;
  margin-left: 10px;
}
</style>

